<template>
    <div class="hello">
        <!-- 实体层，包括展示部分和输入部分 -->
        <div class="showdata">
            <div class="barCom">
                <div class="barStart">
                    <!-- 添加、搜索信息部分 -->
                    <button @click="showAdd = true" class="searchBtn">添加</button>
                </div>

                <div class="barEnd">
                    <input class="searchInput" type="search" v-model="keyword" @input="searchList(keyword)"
                           placeholder="搜索"/>
                    <!-- 搜索按钮，输入框没值，默认样式为searchBtn，有值则背景变色 -->
                    <button @click="searchList(keyword)"
                            :style="keyword?'background: rgba(0, 184, 245,0.8);color:#f8f8f8':''" class="searchBtn">搜索
                    </button>
                </div>

            </div>

            <!-- 展示部分 -->
            <div class="show_data">
                <span class="title stu_Idwidth">接口id</span>
                <span class="title stu_namewidth">接口名</span>
                <span class="title stu_sexwidth">单机最高并发数</span>
                <span class="title stu_collegewidth">超时时间</span>
                <span class="title stu_classwidth">可用开关</span>
                <span class="title listwidth">操作</span>
            </div>

            <!-- 展示、分页，核心代码：item in showData.slice((currentPage-1)*pagesize,currentPage*pagesize) -->
            <div class="show_data" v-for="item in showData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                 :key="item.index">
                <font class="api_Id" v-model="api_Id" v-html="item.id"></font>
                <font class="api_name" v-model="api_name" v-html="item.apiName"></font>
                <font class="api_concurrency" v-model="api_concurrency"
                      v-html="item.concurrent"></font>
                <font class="api_timeout" v-model="api_timeout"
                      v-html="item.overtime"></font>
                <font class="api_switch" v-model="api_switch" v-html="item.available"></font>
                <span class="content_data listwidth listBtn">
                    <button @click="isDel(item.id)" class="delBtn">删除</button>
                    <button @click="toData(item)" class="upBtn">修改</button>
                </span>
            </div>

            <!-- 分页 -->
            <el-pagination class="nh_pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="currentPage" :page-sizes="[5, 10, 20, 40]" :page-size="pagesize"
                           layout="total, sizes, prev, pager, next, jumper" :total="showData.length">
            </el-pagination>

            <!-- 点击空白部分，弹窗消失 -->
            <div class="mask" v-if="showUpdate" @click="showUpdate = false"></div>
            <div class="mask" v-if="showAdd" @click="showAdd = false"></div>
        </div>

        <!-- 添加弹出层 -->
        <div class="pop" v-if="showAdd">
            <!-- <div class="jianjiao"></div> -->
            <!-- 弹出框的尖角 -->
            <div class="popTop">添加接口信息</div>
            <div class="updateList">
                <div class="popRow">
                    <span>接口名</span><input v-model="api_name" placeholder="请输入接口名"/>
                </div>
                <div class="popRow">
                    <span>单机最高并发数</span><input v-model="api_concurrency" placeholder="请设置单机最高并发数"/>
                </div>
                <div class="popRow">
                    <span>超时时间</span><input v-model="api_timeout" placeholder="请设置超时时间"/>
                </div>
                <div class="popRow">
                    <span>可用开关</span><input v-model="api_switch" placeholder="请输入可用开关"/>
                </div>
            </div>
            <div class="btnList">
                <button @click="showAdd = false" class="cancelBtn popBtn">取消</button>
                <button @click="addStu" class="searchBtn popBtn">添加</button>
            </div>
        </div>

        <!-- 修改弹出层，通过toData()方法传值展示，通过updateStu()方法进行修改 -->
        <div class="updatePop" v-if="showUpdate">
            <div class="popTop">修改信息</div>
            <div class="updateList">
                <div class="popRow">
                    <span>接口id：</span>{{popapi_Id}}
                </div>
                <div class="popRow">
                    <span>接口名：</span>{{popapi_name}}
                </div>
                <div class="popRow">
                    <span>单机最高并发数</span><input v-model="popapi_concurrency" label="popstu_sex"/>
                </div>
                <div class="popRow">
                    <span>超时时间</span><input v-model="popapi_timeout" label="popstu_college"/>
                </div>
                <div class="popRow">
                    <span>可用开关</span><input v-model="popapi_switch" label="popstu_class"/>
                </div>
            </div>
            <div class="btnList">
                <button @click="showUpdate = false" class="cancelBtn popBtn">取消</button>
                <button @click="updateStu" class="searchBtn popBtn">确认
                </button>
            </div>
        </div>

    </div>
</template>

<script>
  export default {
    data() {
      return {
        api_Id: '',
        api_name: '',
        api_concurrency: '',
        api_timeout: '',
        api_switch: '',
        // stu_Id: '',
        // stu_name: '',
        // stu_sex: '',
        // stu_college: '',
        // stu_class: '',
        popapi_Id: '',
        popapi_name: '',
        popapi_concurrency: '',
        popapi_timeout: '',
        popapi_switch: '',
        popstu_Id: '',
        popstu_name: '',
        popstu_sex: '',
        popstu_college: '',
        popstu_class: '',
        showData: [],
        showUpdate: false,
        showAdd: false,
        keyword: '',
        list: [],
        currentPage: 1, // 初始页
        pagesize: 10, // 每页的数据
        IP: 'http://localhost:8081/config/'
      }
    },

    mounted() {
      this.showStu();
    },

    methods: {
      // 查询全部数据
      showStu() {
        let data = []
        this.$axios.get(this.IP + 'getAPI').then(res => {
          data = res.data
          this.showData = data.sort((a, b) => a.api_Id - b.api_Id) // id升序排列
        })
      },

      // 添加数据
      addStu() {
        const api_name = this.api_name // 双向绑定，把输入框里的值传给接口
        const api_concurrency = parseInt(this.api_concurrency)
        const api_timeout = parseInt(this.api_timeout)
        const api_switch = parseInt(this.api_switch)
        this.$axios.post(this.IP + 'insertAPI/' + api_name + '/' + api_concurrency + '/' + api_timeout + '/' + api_switch).then(response => {
          this.showStu()
        })
        this.showAdd = false
      },

      // 临时存储修改的值，传到弹出层，供 updateStu()调用
      toData(e) {//e就是item
        this.showUpdate = true
        this.popapi_Id = e.id
        this.popapi_name = e.apiName
        this.popapi_concurrency = e.concurrent
        this.popapi_timeout = e.overtime
        this.popapi_switch = e.available
      },

      // 修改数据，在弹出层调用toData()里的数据
      updateStu() {//修改后数据应该是string了，可以转化为int，不过这里不转化也可以（只要用户输入数字）
        this.$axios.put(this.IP + 'updateAPI/' + this.popapi_Id + '/' + this.popapi_concurrency + '/' + this.popapi_timeout + '/' + this.popapi_switch).then(response => {
          this.showStu()
        })
        this.showUpdate = false
      },

      // 删除前的判断，根据confirm的确认和取消，如果点击确认，则把id传给delStu()
      isDel(e) {
        let res = confirm("确认删除吗？");
        if (res == true) {
          this.popstu_Id = e
          this.delStu(e)
        } else {
        }
      },

      // 删除数据，通过isDel()传过来id进行删除
      delStu(e) {
        this.visible = false
        const api_Id = e
        console.log(e)
        this.$axios.delete(this.IP + 'deleteAPI/' + parseInt(e)).then(response => {
          console.log("*********")
          this.showStu()
          console.log("*********")
        })
      },

      // 关键字高亮处理
      HighLight(value) {
        // value为searchList()方法里传来的关键字
        let keyword = this.keyword // 此为搜索框里的关键字
        // 两者关键字一致，则添加关键字高亮
        if (value.indexOf(keyword) !== -1) {
          // replace 为替换方法
          const highLight = value.replace(keyword, '<span style="color:#49e6e6;">' + keyword + '</span>')
          return highLight
        } else {
          return value
        }
      },

      // 将数据转为字符串
      setSlist(arr) {
        this.showData = JSON.parse(JSON.stringify(arr))
      },

      // 搜索关键字
      searchList(e) {
        const sValue = e
        const vm = this
        // 调用接口，而不是引用showStu()方法里的值，是为了避免对象浅拷贝，因为上次关键字的高亮，会在下次搜索时也高亮
        // 两次使用then，是因为请求是异步的，不确定什么时候处理完，从而不知道this.list什么时候获取到值，避免this.list出现空的现象
        this.$axios.get(this.IP + 'showStu').then((res) => {
          const data = res.data
          this.list = data.sort((a, b) => a.api_Id - b.api_Id) // 根据Id升序排列
        }).then(() => {
          if (sValue) {
            const tempSearch = [] // 临时存放搜索结果的数组
            // 过滤需要的数据，即只要搜索框里出现的 "值" 都添加到数组里，这个数组用来展示搜索结果
            this.list.forEach(function (item) {
              item.api_Id = item.api_Id.toString()
              if (item.api_Id.indexOf(sValue) > -1 || item.api_name.indexOf(sValue) > -1 || item.api_concurrency
                .indexOf(sValue) > -1 || item.api_timeout.indexOf(sValue) > -1 || item.api_switch.indexOf(
                sValue) > -1) {
                tempSearch.push(item)
              }
            })
            // 遍历tempSearch，做关键字高亮处理
            tempSearch.map((item) => {
              item.api_Id = this.HighLight(item.api_Id)
              item.api_name = this.HighLight(item.api_name)
              item.api_concurrency = this.HighLight(item.api_concurrency)
              item.api_timeout = this.HighLight(item.api_timeout)
              item.api_switch = this.HighLight(item.api_switch)
            })
            this.setSlist(tempSearch) // 将过滤后的数据给了showData,然后遍历显示
          } else {
            // 没有搜索内容，则展示全部数据
            this.setSlist(this.list)
          }
        })
      },

      // 初始页currentPage、初始每页数据数pagesize和数据data
      handleSizeChange: function (size) {
        this.pagesize = size; // 每页下拉显示数据
      },

      handleCurrentChange: function (currentPage) {
        this.currentPage = currentPage; // 点击第几页
      }
    }
  }
</script>

<style lang="scss" scoped>
    @import '../../static/index.css';
</style>
